<template>
    <view>
        <form @submit="savepubinfo" report-submit>
            <view class="container">
                <view class="main">
                    <view class="title">任务信息</view>
                    <view class="list">
                        <view class="item">
                            <view class="name">
                                任务名称
                                <text>*</text>
                            </view>
                            <view class="selectitem"><input :value="taskinfo.title" type="text" name="title" placeholder="请输入任务名称" /></view>
                        </view>

                        <view class="item">
                            <view class="name">所属职位</view>
                            <view class="selectitem">
                                <picker :value="Index" :range="joblist" range-key="jobtitle" @change="bindJobChange">
                                    <view class="picker">
                                        {{ joblist[jobindex].jobtitle ? joblist[jobindex].jobtitle : '请选择所属职位' }}
                                    </view>
                                </picker>
                            </view>
                        </view>

                        <view class="item">
                            <view class="name">
                                推荐入职奖
                                <text>*</text>
                            </view>
                            <view class="selectitem"><input :value="taskinfo.money" type="text" name="money" placeholder="请输入推荐入职奖" /></view>
                        </view>

                        <view class="item">
                            <view class="name">
                                招聘人数
                                <text>*</text>
                            </view>
                            <view class="selectitem"><input :value="taskinfo.num" type="text" name="num" placeholder="请输入招聘人数" /></view>
                        </view>
                    </view>
                </view>

                <view class="main">
                    <view class="title">任务说明</view>
                    <view class="list">
                        <view class="item">
                            <view class="selectitem" style="width: 100%; height: 500rpx; line-height: 500rpx">
                                <editor id="editor" class="ql-container" :placeholder="placeholder" @statuschange="onStatusChange" @ready="onEditorReady"></editor>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="weixinmao-float">
                <view class="weixinmao-foot">
                    <button class="footer" formType="submit">保存提交</button>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import { Task } from '../../model/task-model.js';
var task = new Task();
export default {
    data() {
        return {
            formats: {},
            readOnly: false,
            placeholder: '开始输入...',
            editorHeight: 300,
            keyboardHeight: 0,
            isIOS: false,
            sex: 1,
            jobid: 0,
            joblist: [],
            jobindex: -1,

            taskinfo: {
                title: '',
                money: '',
                num: ''
            },

            Index: 0,
            jobtitle: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (e) {
        var that = this;
        uni.setNavigationBarTitle({
            title: '编辑任务'
        });
        if (that.id > 0) {
            var id = that.id;
        } else {
            var id = e.id;
            that.id = e.id;
        }
        const platform = uni.getSystemInfoSync().platform;
        const isIOS = platform === 'ios';
        this.setData({
            isIOS
        });
        this.updatePosition(0);
        let keyboardHeight = 0;
        uni.onKeyboardHeightChange((res) => {
            if (res.height === keyboardHeight) {
                return;
            }
            const duration = res.height > 0 ? res.duration * 1000 : 0;
            keyboardHeight = res.height;
            setTimeout(() => {
                uni.pageScrollTo({
                    scrollTop: 0,
                    success() {
                        that.updatePosition(keyboardHeight);
                        that.editorCtx.scrollIntoView();
                    }
                });
            }, duration);
        });
        var ctoken = uni.getStorageSync('ctoken');
        var params = {
            ctoken: ctoken
        };
        task.getPubTaskInit((data) => {
            that.joblist = data.joblist;
            that.setData({
                joblist: data.joblist
            });
        }, params);
        var params = {
            id: that.id
        };
        task.GetTaskdetail((data) => {
            that.jobindex = isHasElementTwo(that.joblist, data.jobid);
            console.log(that.jobindex);
            that.jobid = data.jobid;
            const query = uni.createSelectorQuery();
            query
                .select('#editor')
                .context(function (res) {
                    res.context.setContents({
                        html: data.content
                    });
                    that.editorCtx = res.context;
                    uni.pageScrollTo({
                        scrollTop: 0,
                        success: () => {
                            that.editorCtx.scrollIntoView();
                        }
                    });
                })
                .exec();
            that.setData({
                taskinfo: data,
                jobindex: that.jobindex
            });
        }, params);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        bindJobChange: function (e) {
            var joblist = this.joblist;
            if (joblist) {
                this.jobindex = e.detail.value;
                this.jobid = joblist[e.detail.value].id;
            }
            this.setData({
                joblist: joblist,
                jobindex: e.detail.value
            });
        },

        updatePosition(keyboardHeight) {
            const toolbarHeight = 50;
            const { windowHeight, platform } = uni.getSystemInfoSync();
            let editorHeight = keyboardHeight > 0 ? windowHeight - keyboardHeight - toolbarHeight : windowHeight;
            this.setData({
                editorHeight,
                keyboardHeight
            });
        },

        calNavigationBarAndStatusBar() {
            const systemInfo = uni.getSystemInfoSync();
            const { statusBarHeight, platform } = systemInfo;
            const isIOS = platform === 'ios';
            const navigationBarHeight = isIOS ? 44 : 48;
            return statusBarHeight + navigationBarHeight;
        },

        onEditorReady() {
            const that = this;
            console.log('fffffff');
            uni.createSelectorQuery()
                .in(uni)
                .select('#editor')
                .context(function (res) {
                    that.editorCtx = res.context;
                })
                .exec();
        },

        blur() {
            this.editorCtx.blur();
        },

        format(e) {
            let { name, value } = e.target.dataset;
            if (!name) {
                return;
            }
            // console.log('format', name, value)
            this.editorCtx.format(name, value);
        },

        onStatusChange(e) {
            const formats = e.detail;
            console.log(formats);
            this.setData({
                formats
            });
        },

        insertDivider() {
            this.editorCtx.insertDivider({
                success: function () {
                    console.log('insert divider success');
                }
            });
        },

        clear() {
            this.editorCtx.clear({
                success: function (res) {
                    console.log('clear success');
                }
            });
        },

        removeFormat() {
            this.editorCtx.removeFormat();
        },

        insertDate() {
            const date = new Date();
            const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            this.editorCtx.insertText({
                text: formatDate
            });
        },

        insertImage() {
            const that = this;
            uni.chooseImage({
                count: 1,
                success: function (res) {
                    that.editorCtx.insertImage({
                        src: res.tempFilePaths[0],
                        data: {
                            id: 'abcd',
                            role: 'god'
                        },
                        width: '80%',
                        success: function () {
                            console.log('insert image success');
                        }
                    });
                }
            });
        },

        savepubinfo: function (e) {
            var that = this;
            var content = '';
            that.editorCtx.getContents({
                success: (res) => {
                    console.log(res.html);
                    content = res.html;
                    var title = e.detail.value.title;
                    var jobid = this.jobid;
                    var money = e.detail.value.money;
                    var num = e.detail.value.num;
                    if (title == '') {
                        uni.showModal({
                            title: '提示',
                            content: '请输入任务名称',
                            showCancel: false
                        });
                        return;
                    }
                    if (jobid == 0) {
                        uni.showModal({
                            title: '提示',
                            content: '请选择所属职位',
                            showCancel: false
                        });
                        return;
                    }
                    if (money == '') {
                        uni.showModal({
                            title: '提示',
                            content: '请输入推荐入职奖',
                            showCancel: false
                        });
                        return;
                    }
                    if (num == '') {
                        uni.showModal({
                            title: '提示',
                            content: '请输入招聘人数',
                            showCancel: false
                        });
                        return;
                    }
                    if (content == '') {
                        uni.showModal({
                            title: '提示',
                            content: '请输入任务说明',
                            showCancel: false
                        });
                        return;
                    }
                    var params = {
                        id: that.id,
                        title: title,
                        jobid: jobid,
                        money: money,
                        num: num,
                        content: content
                    };
                    task.Updatetask((data) => {
                        uni.navigateTo({
                            url: '/pages/tasklist/index'
                        });
                    }, params);
                }
            });
        },

        radioChange: function (e) {
            this.sex = e.detail.value;
        },

        checkboxChange: function (e) {
            var special = e.detail.value;
            this.special = special.join(',');
            //console.log('checkbox发生change事件，携带value值为：', e.detail.value)
        }
    }
};
function isHasElementTwo(arr, value) {
    for (var i = 0, vlen = arr.length; i < vlen; i++) {
        if (arr[i]['id'] == value) {
            return i;
        }
    }
    return -1;
}
</script>
<style>
.container {
    background-color: #f5f5f5;
    min-height: 100%;
    margin-bottom: 20%;
}
.container .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container .main .header {
    width: 730rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    font-size: 0.9rem;
    padding-left: 20rpx;
    color: #000;
    text-align: center;
    background: #fff;
}
.container .main .title {
    width: 730rpx;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    font-size: 0.9rem;
    padding-left: 20rpx;
    color: #888888;
}

.container .main .list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
}

::-webkit-input-placeholder {
    color: #000;
    font-size: 18px;
}

.container .main .list .item {
    width: 700rpx;
    border-bottom: 1rpx solid #f5f5f5;
    align-self: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    /*
flex-direction: row;
justify-content:space-between;
*/
}
.container .main .list .item .name {
    font-size: 14px;
    color: #a2a2a2;
}
.container .main .list .item .name text {
    color: red;
}
.container .main .list .item .selectitem {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #808080;
    font-size: 14px;
    height: 100rpx;
    line-height: 100rpx;
    background: #fff;
}

.container .main .list .item .selectitem input {
    height: 100rpx;
    width: 740rpx;
    color: #000;
    font-size: 18px;
}

.container .main .list .item .selectitem > image {
    width: 30rpx;
    height: 30rpx;
    align-self: center;
}
.container .main .checklist {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    background: #fff;
    flex-wrap: wrap;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-left: 20rpx;
}
.radio {
    font-size: 18px;
}
.picker {
    font-size: 18px;
}
.container .main .checklist checkbox-group {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.container .main .checklist .checkitem {
    font-size: 0.7rem;
    width: 240rpx;
    margin-top: 10rpx;
}

.container .doagree {
    font-size: 0.7rem;
    margin-left: 50rpx;
    margin-top: 40rpx;
    margin-bottom: 280rpx;
    padding-bottom: 50rpx;
}

.container .main .imglist {
    width: 720rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #fff;
}

.container .main .imglist .imgitem {
    width: 200rpx;
    border: 1rpx dotted #f5f5f5;
    position: relative;
}
.container .main .imglist .imgitem image {
    width: 200rpx;
    height: 200rpx;
}

.sum {
    position: absolute;
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    background: #3274e5;
    top: -10rpx;
    left: 150rpx;
    color: #fff;
    z-index: 1000;
    font-size: 0.7rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.sum text {
    font-size: 0.7rem;
    align-self: center;
}

.weixinmao-msg {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.weixinmao-content {
    width: 720rpx;
    height: 450rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map {
    height: 850rpx;
}
.mapbtn {
    background: #3274e5;
    color: #fff;
    font-size: 1rem;
    width: 400rpx;
}
.weixinmao-content .title {
    border-bottom: 1rpx solid #e5e5e5;
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 0.8rem;
    background: #3274e5;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.weixinmao-content .title view:nth-child(1) {
    width: 30%;
}

.weixinmao-content .title view:nth-child(2) {
    width: 40%;
}

.weixinmao-content .title view:nth-child(3) {
    width: 30%;
}

.weixinmao-content .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.weixinmao-content .list .item {
    width: 100%;
    align-self: center;
    text-align: center;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.weixinmao-foot {
    display: flex;
    justify-content: center;
    flex-direction: row;

    z-index: 999;

    width: 100%;
}

.weixinmao-foot view {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    width: 50%;
    border-radius: 0rpx;
    padding-left: 30rpx;
    background: #e64340;
}
.weixinmao-foot button {
    background: #07b56d;
    width: 100%;
    color: #fff;
    border-radius: 0rpx;
    font-size: 1rem;
}

.ismaster {
    color: red;
    font-weight: bold;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-top: 30rpx;
    align-self: center;
}

.selectitem textarea {
    width: 100%;
}

.masterbtn {
    margin-top: 100rpx;
    width: 300rpx;
    background: #3274e5;
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 5rpx;
    text-align: center;
    font-size: 0.7rem;
}

.weixinmao-msg_show {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.weixinmao-content_show {
    width: 550rpx;
    height: 600rpx;
    z-index: 4001;
    background: #fff;
    align-self: center;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weixinmao-content_show .title {
    border-bottom: 1rpx solid #e5e5e5;
    width: 100%;
    text-align: center;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    font-size: 0.8rem;
    background: #3274e5;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.weixinmao-content_show .title view:nth-child(1) {
    width: 30%;
}

.weixinmao-content_show .title view:nth-child(2) {
    width: 40%;
}

.weixinmao-content_show .title view:nth-child(3) {
    width: 30%;
}

.weixinmao-content_show .list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.weixinmao-content_show .list .item {
    width: 100%;
    align-self: center;
    text-align: center;
    padding-top: 15rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.ql-container {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 1.5;
    overflow: auto;
    padding: 10px 10px 20px 10px;
    border: 1px solid #ececec;
}

.ql-active {
    color: #22c704;
}

.iconfont {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 20px;
}

.toolbar {
    box-sizing: border-box;
    padding: 0 10px;
    height: 50px;
    width: 100%;
    position: fixed;
    left: 0;
    right: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ececec;
    border-left: none;
    border-right: none;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}
</style>
